<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        width: 80vw;
        border-collapse: collapse;
        margin: 0 auto;
      }
      table td,
      table th {
        border: 1px solid #cad9ea;
        color: #666;
        padding: 5px;
      }
      table thead th {
        background-color: #cce8eb;
      }
      table tr:nth-child(odd) {
        background: #fff;
      }
      table tr:nth-child(even) {
        background: #f5fafa;
      }
      ul {
        list-style: none;
      }
      a {
      }
    </style>
  </head>
  <body>
    <h1></h1>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th data-order="0" data-sort="count">视频个数(点击排序)</th>
          <th>b站链接</th>
          <th>视频详情</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script src="./lib/axios.js"></script>
    <script>
      const tbody = document.querySelector('tbody');
      const thead = document.querySelector('thead');
      const h1 = document.querySelector('h1');
      let arr = JSON.parse(localStorage.getItem('bvideo')) || [];
      thead.addEventListener('click', function (e) {
        const sort = e.target.dataset.sort;
        const order = e.target.dataset.order;
        if (sort) {
          if (order === '0') {
            arr = arr.sort((a, b) => b.count - a.count);
            e.target.dataset.order = '1';
          } else {
            arr = arr.sort((a, b) => a.count - b.count);
            e.target.dataset.order = '0';
          }
          render();
        }
      });

      getData();
      async function getData() {
        const result = await axios.get('http://127.0.0.1:8080/data');
        if (Array.isArray(result.data.data)) {
          arr = result.data.data;
          localStorage.setItem('bvideo', JSON.stringify(arr));
        } else {
          h1.innerHTML = '以下数据为缓存数据';
        }
        arr = arr.sort((a, b) => a.count - b.count);
        render();
      }
      function render() {
        tbody.innerHTML = arr.reduce((s, v, i) => {
          const subStr = v.videoList.reduce(
            (ss, vv, ii) =>
              ss +
              `   <li>
                <a target="_blank" href="${vv.url}">${ii + 1} ${vv.title} -- ${
                vv.length
              }  </a>
              </li>`,
            ''
          );
          return (
            s +
            `
              <tr>
          <td>${i + 1}</td>
          <td>${v.name}</td>
          <td>${v.count}</td>
          <td><a target="_blank" href="${v.url}">${v.url}</a></td>
          <td>
            <ul>
           ${subStr}
            </ul>
          </td>
        </tr>
            `
          );
        }, '');
      }
    </script>
  </body>
</html>
